<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menangen | RU</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<style type="text/css">
.info {
			margin-left: auto;
			margin-right: auto;
			width: 100%; height: 400px;
			margin-top: -200px;
			top: 50%;
			position:absolute;
}



/***  IMAGES MENU ***/
.menu-radius {
			width:220px; height:140px;
			float:left;
			/*margin-top: 6px;*/
			margin: 12px;
	
			border:3px solid #000000;
			border-radius: 20px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			cursor:pointer;
			opacity:0;
}

.menu-radius:hover
		{
			border:3px solid #225069;
			cursor:pointer;			
		}
/***   IMAGES MENU **********/

 #showMe_A
         {
            background-image:url(images/hl1.png);
			position:absolute;            
			margin-top: 12px;
         }
 #showMe_B
         {
            
			clear:left;
            visibility:hidden;
         }
/*** MAP ***/
#controller_map {	
			background-image:url(images/map.png);
}
/*** CONTACT ***/
#controller_contact {	
			background-image:url(images/contact_me.png);
}

#controller_linux {
			background-image:url(images/linux.png);
}
#controller_developing {
			background-image:url(images/developming.png);
}

</style>
<!--- DOJO toolkit -->

<script type="text/javascript" src="http://yandex.st/dojo/1.6.1/dojo/dojo.xd.js" djConfig="parseOnLoad:true"></script>

<script type="text/javascript">


 dojo.ready(function()
            {
                var REPEAT_DELAY = 200;
                var ANIM_DELAY = 500;
                var situations = 0;

                var animations_elements = ["showMe_A", "controller_developing", "controller_contact", "controller_linux", "controller_map", "controller_6"];
                var number_of_elements = animations_elements.length;


                function make_time() {

                        var now_element = animations_elements[situations];
                        situations++;

                        show_block(now_element);

                        if (situations == number_of_elements)
                        {
        
                         window.clearInterval(timer);
						 passive_animate();
						 /*  english_animate();
						*/
                        }
                    

                }


                var timer = window.setInterval(make_time, REPEAT_DELAY);


                function show_block(element_id)
                {

                        var element  = dojo.byId(element_id);
                        var a = dojo.anim(element,
                        {
                            opacity: 1
                        },
                        ANIM_DELAY);

                }



            }
         );
		 
		 
		 function passive_animate()
		 {              
						time_for_repeat = 3; // seconds
                        images_array = ["hl1.png", "hl2.png", "hl3.png", "hl4.png", "hl5.png", "hl6.png", "hl7.png", "hl8.png", "hl9.png", "hl10.png", "hl11.png"]; // in /images/ folder

                        //Timer()
                        timer = window.setInterval(do_timer, time_for_repeat * 1000);

                        i = 0;
                        next_image = "";
                        ANIM_DELAY = 1000;
                        element_A  = dojo.byId("showMe_A");
                        element_B  = dojo.byId("showMe_B");


                        function do_timer()
                        {
                            i++;


                            if (i >= images_array.length) {

                                 i = 0;

                            }

                           next_image = images_array[i];
                           

                            if (dojo.style(showMe_B, "visibility") == "hidden") {

                                dojo.style(showMe_B, "visibility", "visible");
                                dojo.style(showMe_B, "backgroundImage", "url(images/" + next_image +")");
                                //element_B.style.backgroundImage = 'url(images/)' + next_image;



                                dojo.anim(element_B,
                                {
                                    opacity:1
                                },
                                       ANIM_DELAY, null, hideA);
							
                            }

                            else
                            {

                                dojo.style(showMe_A, "visibility", "visible");
                                dojo.style(showMe_A, "backgroundImage", "url(images/" + next_image +")");

                                dojo.anim(element_B,
                                {
                                    opacity:0
                                },
                                ANIM_DELAY);

														
                              dojo.anim(element_A,
                                {
                                    opacity:1
                                },
                                ANIM_DELAY, null, hideB);							

                            }


                        }


                        //do_timer();
                        function hideA(){dojo.style(showMe_A, "visibility", "hidden"); dojo.style(showMe_A, "opacity", 0)}
                        function hideB(){dojo.style(showMe_B, "visibility", "hidden")}
						
		 }
		 
		 
		 	function english_animate() {
				var ANIM_DELAY = 200;
				
				dojo.anim(english,
                                {
                                    opacity:1,
									width:200
                                },
                                    ANIM_DELAY);
									
				
					timer_english_hide = window.setTimeout(hide_engl_block, 7 * 1000);						
							
			}
			
			function hide_engl_block()
			{
				var ANIM_DELAY = 200;
				
				dojo.anim(english,
                                {
                                    opacity:0,
									width:0
                                },
                                    ANIM_DELAY);
				
			}
			
		 
</script>



</head>




<body id="body">

<div style="height: 100%; position:relative">
	
    <div class="info">    


		<div style="height:100%; position:relative">
        		
                <div style="width:100%; position:absolute; top: 50%; margin-top: -170px;">
                	<div style="height:340px;">
                    		<div style="margin-left:auto; margin-right:auto; height:100%; width:750px;">                                
                                
									<div id="showMe_A" class="menu-radius">
                                    </div>

                                    <div id="showMe_B" class="menu-radius">
                                    </div>
  
                                <a href="developing" title="Software development">
                                <div id="controller_developing" class="menu-radius"></div>
                                </a>
                                <a href="contact" title="Как найти меня">
                                <div id="controller_contact" class="menu-radius"></div>
                                </a>
                                
                                <a href="linux" title="linux software">
                                <div id="controller_linux" class="menu-radius"></div>
                                </a>
                                
                                <a href="map" title="menangen на карте">
                                <div id="controller_map" class="menu-radius"></div>
                                </a>
                                <div id="controller_6" class="menu-radius"></div>
                                
							</div>
                            
					</div>                   
                    
                </div>
        
        </div>


        
    </div>

</div>            	

</body>
</html>
